<template>
  <div>
    <NavBar>
      <template v-slot:default>地址管理</template>
    </NavBar>
    <div class="container">
      <div v-show="list.length == 0" style="margin-top:200px;text-align: center;">
        还没有地址信息，去添加吧！
      </div>
      <!-- 地址 -->
      <div class="address-item">
        <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, onActivated } from "vue";
import NavBar from "components/common/navbar/NavBar";
import { getAddressList } from "network/address";
import { useRouter } from "vue-router";
export default {
  components: {
    NavBar,
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      chosenAddressId: "1",
      list: [],
    });

    const init = () => {
      getAddressList().then((res) => {
        if (res.data.length == 0) {
          state.list = [];
          return;
        }
        state.list = res.data.map((item) => {
          return {
            id: item.id,
            name: item.name,
            tel: item.phone,
            address: `${item.province} ${item.city} ${item.county} ${item.address}`,
            isDefault: !!item.is_default,
          };
        });
      });
    };

    onMounted(() => {
      init();
    });

    onActivated(() => {
      init();
    });
    const onAdd = () => {
      router.push({ path: "/addressedit", query: { type: "add" } });
    };

    const onEdit = (item) => {
      router.push({
        path: "/addressedit",
        query: { type: "edit", addressId: item.id },
      });
    };

    return {
      ...toRefs(state),
      onAdd,
      onEdit,
    };
  },
};
</script>

<style lang="scss">
.container {
  .van-radio__icon {
    display: none;
  }
  .van-button {
    background: var(--color-tint);
    border-color: var(--color-tint);
  }
  .address-item {
    margin-top: 45px;
  }
}
.van-address-list__bottom {
  bottom: 100px !important;
}
</style>
